<template>
  <footer>
    <ul>
      <RouterLink
        custom
        v-slot="{ isActive, navigate }"
        :to="item.path"
        v-for="item in paths"
        :key="item.path"
      >
        <li @click="navigate" :class="isActive ? 'active' : ''">
          <span><van-icon :name="item.icon" /></span>
          <span>{{ item.content }}</span>
        </li>
      </RouterLink>
    </ul>
  </footer>
</template>

<script>
import { RouterLink } from 'vue-router';
// 确保正确导入 van 组件

// 简单的登录状态检查函数
const auth = {
  isLoggedIn() {
    // 根据你的实际登录逻辑调整
    return !!localStorage.getItem('userid') || !!localStorage.getItem('token');
  }
};

export default {
  name: 'TabBar',
  components: {
    RouterLink,
   
  },
  data() {
    return {
      paths: [
        { path: "/home", content: "首页", icon: "wap-home-o" },
        { path: "/kind", content: "分类", icon: "apps-o" },
        { path: "/cart", content: "购物车", icon: "cart-o" },
        { path: "/my", content: "我的", icon: "contact-o" }
      ],
    };
  },
  mounted() {
    this.pathsMap();
  },
  methods: {
    pathsMap() {
      this.paths = this.paths.map((item) => {
        if (item.path === "/my") {
          return { 
            ...item, 
            content: auth.isLoggedIn() ? "我的" : "未登录" 
          };
        }
        return item;
      });
    }
  }
};
</script>

<style scoped lang="less">
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #eee;
  z-index: 1000;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 50px;
}

li {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  
  .van-icon {
    font-size: 20px;
    margin-bottom: 2px;
  }
}

.active {
  color: #ee0a24; /* vant 主题色 */
  
  .van-icon {
    color: #ee0a24;
  }
}
</style>